<template>
  <Modal
    :visible="visible"
    okText="确认"
    cancelText="取消"
    title="编辑信息"
    size="large"
    @ok="handleSubmit"
    @cancel="closeModal"
    :destroy-on-close="true"
  >
    <div class="centent">
      <Form
        ref="formRef"
        :model="formState"
        :labelCol="{ style: { width: '80px' } }"
        :wrapper-col="{ style: { width: '180px' } }"
      >
        <Row>
          <Col :span="12">
            <FormItem label="用户名" name="userName">
              {{ formState.userName }}
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem mesa label="姓名" name="name">
              <Input v-model:value="formState.name" placeholder="请输入姓名" />
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col :span="12">
            <FormItem label="所属企业" name="tenantName">
              {{ formState.tenantName }}
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem mesa label="是否内置" name="isBuiltIn">
              {{ formState.isBuiltIn ? '是' : '否' }}
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col :span="12">
            <FormItem label="密码" name="password" :rules="formState.isUpdatePassword ? pwdRule : []">
              <Space>
                <InputPassword
                  v-model:value="formState.password"
                  :disabled="!formState.isUpdatePassword"
                  placeholder="请输入密码"
                >
                </InputPassword>
                <template v-if="!formState.isUpdatePassword">
                  <a @click="handleUpdatePassword">
                    <EditOutlined />
                  </a>
                </template>
              </Space>
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col :span="12">
            <FormItem required label="手机号码" name="phone" :rules="rules">
              <Space>
                <Input
                  v-model:value="formState.phone"
                  :disabled="!formState.isUpdatePhone"
                  placeholder="请输入手机号码"
                >
                </Input>
                <template v-if="!formState.isUpdatePhone">
                  <a @click="handleUpdatePhone">
                    <EditOutlined />
                  </a>
                </template>
              </Space>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="邮箱" name="email" :rules="rules2">
              <Space>
                <Input v-model:value="formState.email" :disabled="!formState.isUpdateEmail" placeholder="请输入邮箱">
                </Input>
                <template v-if="!formState.isUpdateEmail"
                  ><a @click="handleUpdateEmial"> <EditOutlined /> </a
                ></template>
              </Space>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <FormItem label="创建时间" name="createdTime">
            {{ dayjs(formState.createdTime).format('YYYY-MM-DD HH:mm:ss') }}
          </FormItem>
        </Row>
        <Row>
          <FormItem label="状态" name="status" valuePropName="formState.status">
            <Switch
              v-model:value="formState.status"
              checked-children="启用"
              un-checked-children="停用"
              :checkedValue="1"
              :unCheckedValue="0"
              v-model:checked="formState.status"
            />
          </FormItem>
        </Row>
      </Form>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { EditOutlined } from '@ant-design/icons-vue';
import { Modal, Form, Row, Col, Input, Switch, FormItem, message, Space, InputPassword } from 'ant-design-vue';
import { updateAdminUser } from '/@/api/tenant-mgmt/enterprise-admin';
import dayjs from 'dayjs';
const visible = ref(false);
const formRef = ref(null);

const formState = ref({
  userName: undefined,
  name: undefined,
  phone: undefined,
  email: undefined,
  tenantName: undefined,
  isBuiltIn: undefined,
  status: undefined,
  password: undefined,
  isUpdatePassword: false,
  isUpdatePhone: false,
  isUpdateEmail: false,
  createdTime: undefined,
  id: undefined,
});

const rules = ref<any>([]);
const rules2 = ref<any>([]);

function setPhoneRule() {
  if (formState.value.isUpdatePhone) {
    rules.value = [
      { required: formState.value.isUpdatePhone, message: '请输入手机号码', trigger: 'change' },
      {
        pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
        message: '请输入正确的手机号码',
      },
    ];
  } else {
    rules.value = [];
  }
}

function setEmailRule() {
  if (formState.value.isUpdateEmail) {
    rules2.value = [
      {
        type: 'email',
        message: '请输入正确的邮箱',
      },
    ];
  } else {
    rules2.value = [];
  }
}

const handleUpdatePassword = () => {
  formState.value.isUpdatePassword = true;
  formState.value.password = '';
};

const handleUpdatePhone = () => {
  formState.value.isUpdatePhone = true;
  setPhoneRule();
  formState.value.phone = '';
};

const handleUpdateEmial = () => {
  formState.value.isUpdateEmail = true;
  setEmailRule();
  formState.value.email = '';
};

const closeModal = () => {
  visible.value = false;
  formRef.value.clearValidate();
  rules.value = [];
};

const openModal = () => {
  visible.value = true;
};
const pwdRule = ref([
  { required: true, message: '请输入密码' },
  {
    pattern: /[a-zA-Z\d!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]{8,18}/,
    message: '请输入密码长度为8-18位,包含大小写字母、数字和特殊字符4类至少3类',
  },
]);
const emit = defineEmits(['get']);
const handleSubmit = async () => {
  formRef.value.validateFields().then(async () => {
    let res = await updateAdminUser(formState.value);
    if (res) {
      message.success('编辑成功');
      emit('get');
    }
    closeModal();
  });
};

const setFormState = (user) => {
  const { email, tenantName, isBuiltIn, password, phone, name, userName, status, id, createdTime } = user;
  formState.value = {
    email,
    tenantName,
    isBuiltIn,
    phone,
    name,
    userName,
    password,
    status,
    id,
    createdTime,
    isUpdatePassword: false,
    isUpdatePhone: false,
    isUpdateEmail: false,
  };
};

defineExpose({ closeModal, openModal, setFormState });
</script>

<style lang="less" scoped></style>
